<template>
  <div class="nav-left">
    <div class="logo">
      <img title="CSDN首页" src="~@/assets/images/logo.png" />
    </div>
    <nuxt-link :to="nav.path" v-for="nav in navLeft" :key="nav.path">{{nav.meta.title}}</nuxt-link>
  </div>
</template>

<script lang='ts'>
import { Component, Vue } from "nuxt-property-decorator";

@Component
export default class extends Vue {
  get navLeft(){
    return this.$store.state.navModule.navLeft;
  }
}
</script>

<style lang='less' scoped>
.nav-left {
  .flex-box(row);
  a {
    .wh(auto, 48px);
    padding-left: 15px;
    padding-right: 15px;
    display: inline-block;
    line-height: 48px;
    color: #222;
    &:hover {
      text-decoration: none;
      background-color: #f0f0f5;
    }
  }
  .logo img {
    .wh(auto, 48px);
  }
}
</style>